<template>
	<div class="search-history">
		<van-cell>
			<div slot="title">历史搜索</div>
			<div v-if="isDeleteShow">
				<span @click="$emit('update-histories',[])">全部删除 </span>
				<span @click="isDeleteShow = false">完成</span>
			</div>
			<van-icon name="delete" v-else @click="isDeleteShow = true" />
		</van-cell>
		<van-cell v-for="(item,index) in searchHistories" :key="index" :title="item" @click="onDelete(item,index)">
			<van-icon name="close" v-show="isDeleteShow" />
		</van-cell>
	</div>
</template>

<script>
	import { setItem } from '../../../utils/storage.js'
	
	export default {
		name:'SearchHistory',
		props:{
			searchHistories: {
				type:Array,
				required:true
			}
		},
		data() {
			return {
				isDeleteShow:false
			}
		},
		methods: {
			onDelete(item,index) {
				if(this.isDeleteShow) {
					this.searchHistories.splice(index,1)
					
					setItem('search-histories',this.searchHistories)
				}else {
					this.$emit('search',item)
				}
			}
		}
	}
</script>

<style>
</style>
